﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>模拟3D旋转效果图</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		function roll3d(img){
			var i=0;
			var rolling;
			var img=$(img);
			img.parent().append("<div class='lay_left'>《</div><div class='lay_right'>》</div>");
			img.eq(i).show();
			function rolling(html){
				roll = setInterval(function(){
					if(html=="《"){i--}else{i++}
					img.hide();
					if(i>35){i=0;}else if(i<0){i=35;}
					img.eq(i).show();
				},100);
			}
			$('.lay_left,.lay_right').mouseenter(function(){rolling($(this).html());}).mouseout(function(){clearInterval(roll);}).mouseout(function(){clearInterval(roll);});
		}
		$(document).ready(function(){
			roll3d("#scroll img");
		});
	</script>
	<style type="text/css">
		*{padding:0px;margin:0px;}
		body{background:#eee;}
		#scroll{position:relative;width:765px;margin:150px auto;height:313px;overflow:hidden;border:1px solid #aaa;background:#fff;}
		#scroll img{display:block;}
		.lay_left,.lay_right{position:absolute;top:45%;line-height:40px;text-align:center;z-index:10;width:50px;height:40px;cursor:pointer;background:#bbb;}
		.lay_right{right:0px;}
	</style>
</head>
<body>
<div id="scroll">
	<img src="car/1.png" alt="汽车" />
	<img src="car/2.png" alt="汽车" />
	<img src="car/3.png" alt="汽车" />
	<img src="car/4.png" alt="汽车" />
	<img src="car/5.png" alt="汽车" />
	<img src="car/6.png" alt="汽车" />
	<img src="car/7.png" alt="汽车" />
	<img src="car/8.png" alt="汽车" />
	<img src="car/9.png" alt="汽车" />
	<img src="car/10.png" alt="汽车" />
	<img src="car/11.png" alt="汽车" />
	<img src="car/12.png" alt="汽车" />
	<img src="car/13.png" alt="汽车" />
	<img src="car/14.png" alt="汽车" />
	<img src="car/15.png" alt="汽车" />
	<img src="car/16.png" alt="汽车" />
	<img src="car/17.png" alt="汽车" />
	<img src="car/18.png" alt="汽车" />
	<img src="car/19.png" alt="汽车" />
	<img src="car/20.png" alt="汽车" />
	<img src="car/21.png" alt="汽车" />
	<img src="car/22.png" alt="汽车" />
	<img src="car/23.png" alt="汽车" />
	<img src="car/24.png" alt="汽车" />
	<img src="car/25.png" alt="汽车" />
	<img src="car/26.png" alt="汽车" />
	<img src="car/27.png" alt="汽车" />
	<img src="car/28.png" alt="汽车" />
	<img src="car/29.png" alt="汽车" />
	<img src="car/30.png" alt="汽车" />
	<img src="car/31.png" alt="汽车" />
	<img src="car/32.png" alt="汽车" />
	<img src="car/33.png" alt="汽车" />
	<img src="car/34.png" alt="汽车" />
	<img src="car/35.png" alt="汽车" />
	<img src="car/36.png" alt="汽车" />
</div>
</body>
</html>